<ion-content padding class="transparent-header">
  <ion-header>
    <ion-navbar>
    </ion-navbar>
  </ion-header>
  <div id="profile-bg" [ngStyle]="{'background-image': 'url(' + user.coverImage +')'}"></div>
  <div id="content">
    <div id="profile-info" padding>
      <img id="profile-image" [src]="user.profileImage">
      <h3 id="profile-name">{{user.name}}</h3>
      <p>{{user.occupation}} &bull; {{user.location}}</p>
      <p class="profile-description">{{user.description}}</p>
      <button ion-button *ngIf="!following" small color="purple" (click)="follow()">Follow</button>
      <button ion-button *ngIf="following" class="follow-button" small color="purple" (click)="follow()">Following<ion-icon name="checkmark"></ion-icon></button>
    </div>
    <hr/>
    <ion-row class="profile-numbers">
      <ion-col col-4>
        <p>Followers</p>
        <span>{{user.followers}}</span>
      </ion-col>
      <ion-col col-4>
        <p>Following</p>
        <span>{{user.following}}</span>
      </ion-col>
      <ion-col col-4>
        <p>Posts</p>
        <span>{{user.posts}}</span>
      </ion-col>
    </ion-row>
    <div id="posts">
      <ion-card *ngFor="let post of posts">
        <ion-item>
          <ion-avatar item-start>
            <img [src]="user.profileImage">
          </ion-avatar>
          <h2 class="sticky">{{user.name}}</h2>
          <p>{{post.date}}</p>
        </ion-item>
        <img [src]="post.postImageUrl" (click)="imageTapped(post)">
        <ion-card-content>
          <p>{{post.text}}</p>
        </ion-card-content>
        <ion-row>
          <ion-col col-4>
            <button ion-button color="purple" clear small icon-left (click)="like(post)">
                <ion-icon name='thumbs-up'></ion-icon>
                {{post.likes}} Likes
              </button>
          </ion-col>
          <ion-col col-5>
            <button ion-button no-padding color="purple" clear small icon-left (click)="comment(post)">
                <ion-icon name='text'></ion-icon>
                {{post.comments}} Comments
              </button>
          </ion-col>
          <ion-col col-3 align-self-center text-center>
            <p>
              {{post.timestamp}}
            </p>
          </ion-col>
        </ion-row>
      </ion-card>
    </div>
  </div>
</ion-content>
